import { useState } from 'react'
import styles from './my.module.css'
import { Avatar, List } from 'antd-mobile'
import lsbj from '../../img/lsbj.png'
import b from '../../img/b.png'
import { UserAddOutline } from 'antd-mobile-icons'
import cyhy2 from '../../imgs/cyhy2.png'
import wdys from '../../imgs/wdys.png'
import jk from '../../imgs/jk.png'
import shdz from '../../imgs/shdz.png'
import jkda from '../../imgs/jkda.png'
import zh from '../../imgs/zh.png'
import yhj from '../../imgs/yhj.png'
import tcb from '../../imgs/tcb.png'
import kf from '../../imgs/kf.png'
import sj from '../../imgs/sj.png'
import { Popup, Button } from 'antd-mobile'
import wx from '../../imgs/wx.jpg'

function Index() {
  const demoAvatarImages = [
    'https://images.unsplash.com/photo-1548532928-b34e3be62fc6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
    'https://images.unsplash.com/photo-1493666438817-866a91353ca9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=b616b2c5b373a80ffc9636ba24f7a4a9',
    'https://images.unsplash.com/photo-1542624937-8d1e9f53c1b9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
    'https://images.unsplash.com/photo-1546967191-fdfb13ed6b1e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
  ]
  const [visible5, setVisible5] = useState(false)
  return (
    <div>
      <div className={styles.gr}>
        <span className={styles.zc}>个人中心</span>
      </div>
      <div className={styles.yh} style={{ backgroundImage: `url(${lsbj})` }}>
        <div className={styles.fx}>
          <Avatar className={styles.tx} style={{ borderRadius: "50%" }} src={demoAvatarImages[0]} />
          <span className={styles.xg} onClick={() => setVisible5(true)}><UserAddOutline />修改头像</span>
          <br />
          <span className={styles.yhm}>用户名<img style={{ width: 18, }} src={b} alt="" /></span>
        </div>

      </div>
      <div className={styles.ys}>
        <List>
          <List.Item className={styles.hy} prefix={<img className={styles.gb} src={wdys} alt="" />} onClick={() => { }}>
            我的医生
          </List.Item>
        </List>
        <div>

          <br />
          <List >
            <List.Item className={styles.hy} extra={<span>立即开通</span>} prefix={<img className={styles.gbb} src={cyhy2} alt="" />} onClick={() => { }}>
              春雨会员
            </List.Item>
            <List.Item className={styles.hy} prefix={<img className={styles.gb} src={jkda} alt="" />} onClick={() => { }}>
              健康档案
            </List.Item>
            <List.Item className={styles.hy} prefix={<img className={styles.gb} src={shdz} alt="" />} onClick={() => { }}>
              收货地址
            </List.Item>
            <List.Item className={styles.hy} prefix={<img className={styles.gb} src={jk} alt="" />} onClick={() => { }}>
              健康+
            </List.Item>
          </List>
          <br />
          <List >
            <List.Item className={styles.hy} prefix={<img className={styles.gbb} src={zh} alt="" />} onClick={() => { }}>
              春雨会员
            </List.Item>
            <List.Item className={styles.hy} prefix={<img className={styles.gb} src={yhj} alt="" />} onClick={() => { }}>
              健康档案
            </List.Item>
            <List.Item className={styles.hy} prefix={<img className={styles.gb} src={tcb} alt="" />} onClick={() => { }}>
              收货地址
            </List.Item>

          </List>
          <br />
          <List>
            <List.Item className={styles.hy} prefix={<img className={styles.gb} src={kf} alt="" />} onClick={() => { }}>
              联系客服
            </List.Item>
          </List>
          <br />
          <List>
            <List.Item className={styles.hy} prefix={<img className={styles.gb} src={sj} alt="" />} onClick={() => { }}>
              绑定手机
            </List.Item>
          </List>
        </div>
        <div>
          {/* <Button
            onClick={() => {
              setVisible5(true)
            }}
          >
          </Button> */}
          <Popup
            visible={visible5}
            position='bottom'
            onMaskClick={() => setVisible5(false)}
            onClose={() => setVisible5(false)}
            bodyStyle={{ borderTopLeftRadius: 12, borderTopRightRadius: 12 }}
          >
            <div className={styles.actionSheet}>
              <div className={styles.sheetHeader}>
                <div className={styles.sheetTitle}>用微信头像</div>
                <img className={styles.sheetAvatar} src={wx} alt="wx" />
              </div>
              <div className={styles.sheetGroup}>
                <List className={styles.centerList}>
                  <List.Item arrowIcon={false} onClick={() => { }}>
                    从相册选择
                  </List.Item>
                  <List.Item arrowIcon={false} onClick={() => { }}>
                    拍照
                  </List.Item>
                </List>
              </div>
              <div className={styles.sheetGap} />
              <div className={styles.sheetGroup}>
                <List className={styles.centerList}>
                  <List.Item className={styles.cancelItem} arrowIcon={false} onClick={() => { setVisible5(false) }}>
                    取消
                  </List.Item>
                </List>
              </div>
            </div>
          </Popup>
        </div>
      </div>


    </div>
  )
}

export default Index
